<template>
  <div class="appCon t-center page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}" style="padding:unset;">
    <!-- 顶部盒子 -->
    <!-- <van-nav-bar title="手机号" fixed placeholder :border="false"> -->
      <!-- 顶部返回按钮 -->
      <!-- <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.go(-1)" />
      </template>
    </van-nav-bar> -->
    
    <navbar :title="title"></navbar>
    <!-- this is find indexpage -->
    <div class="rent" style="margin-top:10px;">我们已发送了校验码到您的手机</div>
    <div class="mobileQr">{{ mobile }}</div>

    <div class="marTop t-center">
      <van-field
        v-model="messageCode"
        center
        clearable
        label="校验码"
        placeholder="请输入校验码"
        style="font-size: 15px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;"
      >
        <template #button>
          <van-button
            v-if="isShowMessage"
            @click="messageDown"
            size="small"
            type="primary"
            style="font-size: 15px;font-family: PingFang SC;font-weight: 500;"
            >发送校验码</van-button
          >
          <van-button v-else size="small" type="primary" disabled
            style="font-size: 15px;font-family: PingFang SC;font-weight: 500;"
            >重发({{ countDown }}S)</van-button
          >
        </template>
      </van-field>
      <!-- <van-button
        class="coll_80"
        size="small"
        type="primary"
        square
        @click="finishEditPhone"
        >下一步</van-button
      > -->
      <div class="but">
        <van-button block type="primary" style="color:#ffffff !important;font-size:16px !important;" @click="finishEditPhone">保存</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {getUserAppAcquire,getUserAppCheck,getUserInfoMyUpdateMyInfoC} from './api'
export default {
  name: "msgAuthentication",
  data() {
    return {
      // header栏 => 标题
      title:"手机号",

      // 手机号码
      mobile: "",
      // 手机验证码
      messageCode: "",
      // 短信倒计时俺妞妞
      countDown: 59,
      // 按钮显示状态
      isShowMessage: true,
      dataCode:'',
      // 获取屏幕状态栏高度
      phoneStatusBarHeight:''
    };
  },
  methods: {
    // 获取验证码按钮
    messageDown() {
      this.isShowMessage = false;
      let params = {
        mobile:this.mobile,
        type:1
      }
      this.initUserAppAcquire(params)
      let time = setInterval(() => {
        this.countDown --
        if (this.countDown == 0) {
            clearInterval(time);
            this.countDown = 59
            this.isShowMessage = true
        }
      }, 1000);
    },
    // 获取验证按
    async initUserAppAcquire(params){
      const {data} = await getUserAppAcquire(params)
    },
    // 修改手机号码
    async initUserInfoMyUpdateMyInfoC(params){
      const {data} = await getUserInfoMyUpdateMyInfoC(params)
    },
    // 下一步
    async finishEditPhone() {
      if(this.messageCode == '' ) return Toast('请输入校验码')
      // if(this.messageCode !== this.trueMessageCode ) return 
      let params = {
        mobile:this.mobile,
        code:this.messageCode
      }
      const data = await getUserAppCheck(params)
      this.dataCode = data.code 
      if (data.code == '-2') return Toast('输入的校验码有误，请重新输入！')
      let value = {
          newMobile:this.mobile,
          type:'02'
        }
      this.initUserInfoMyUpdateMyInfoC(value)
      this.$router.push({ 
        name: "finishEditPhone",
        query:{
          dataCode:this.dataCode
        } 
      });
    },
  },
  created() {
    // 获取屏幕状态栏高度
    this.phoneStatusBarHeight = window.phoneStatusBarHeight
    this.mobile = this.$route.query.mobile;
    document.title = "手机号"
  },
};
</script>

<style scoped>
.rent {
  color: #999999;
  font-size: 13px;
  /* font-size: 0.59rem; */
}
.coll_80 {
  margin-top: 20px;
}
</style>

<style lang="less">
.but{
  margin: 20px 12px;
  .van-button{
    color: black !important;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}
</style>